<template>
	<div>
		<navigationBar :backType="2" navigationTitle="选择技师" />

		<view class="wrap-head" :style="'top:' + navigationHeight + 'px'">
			<view class="head-address flex align-center just-between">
				<view class="left-address flex align-center">
					<image
						:src="getImageURL('technician/choose/location.png')"
					/>
					<view class="f-28">
						当前定位:
						{{
							locationStatus === "loading"
								? "正在定位..."
								: locationStatus === "success"
								? locationInfo.city
								: "定位失败"
						}}
					</view>
				</view>

				<view
					class="right-again flex align-center"
					@click="onReLocation"
				>
					<image :src="getImageURL('technician/choose/reget.png')" />
					<view class="f-24">重新获取</view>
				</view>
			</view>

			<view class="head-search flex align-center just-between">
				<picker
					mode="selector"
					:range="screenCityList"
					range-key="name"
					:value="screenCity"
					@change="onScreenCityChange"
				>
					<view class="city-bg flex align-center">
						<view class="f-28 limit-num-line"> {{ screenCity }} </view>
						<image
							:src="
								getImageURL(
									'technician/choose/city_arrow_down.png'
								)
							"
						/>
					</view>
				</picker>

				<view class="search-bg flex align-center">
					<image :src="getImageURL('technician/choose/search.png')" />

					<input
						class="f-26 flex align-center"
						type="text"
						placeholder="请输入服务人名称"
						placeholder-class="place"
						v-model="keywords"
						@blur="onRefresh"
					/>
				</view>
			</view>
		</view>

		<view class="wrap paddingBottom">
			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item flex align-center just-between">
						<view class="left flex column align-center just-center">
							<image class="avatar" :src="item.work_image" />

							<view class="service-status f-24">
								{{
									item.is_service === 1 ? "可接单" : "已休息"
								}}
							</view>
						</view>

						<view class="center">
							<view class="c-a flex align-center">
								<view class="nickname fb-32 limit-num-line">
									{{ item.name }}
								</view>

								<view
									class="life f-20"
									v-if="item.images.length > 0"
									@click.stop="onPreviewImage(item.images)"
								>
									生活照
								</view>
							</view>

							<view class="c-b flex align-center">
								<image
									class="star"
									:src="
										getImageURL(
											'technician/choose/star.png'
										)
									"
								/>

								<view class="score f-20">
									{{ item.star }}
								</view>

								<view class="num f-20">
									已服务{{ item.total_sales }}单
								</view>
							</view>

							<view class="c-c flex align-center">
								<image
									:src="
										getImageURL(
											'technician/choose/location.png'
										)
									"
								/>
								<view class="f-24">{{ item.distance }}</view>
							</view>

							<view class="c-d flex align-center">
								<view class="flex align-center f-26">
									<image
										class="details-img"
										:src="
											getImageURL(
												'technician/choose/details.png'
											)
										"
									/>
									<view class="details-text">详情</view>
								</view>

								<view
									class="evaluate-bg flex align-center f-26"
									@click.stop="onShowEvaluate(item)"
								>
									<image
										class="evaluate-img"
										:src="
											getImageURL(
												'technician/choose/eveluate.png'
											)
										"
									/>
									<view class="evaluate-text">
										{{ item.coumment }}
									</view>
								</view>

								<view class="like-bg flex align-center f-26">
									<image
										class="like-img"
										v-if="item.is_like == 1"
										:src="
											getImageURL(
												'technician/choose/like_select.png'
											)
										"
									/>

									<image
										class="like-img"
										v-else
										:src="
											getImageURL(
												'technician/choose/like_normal.png'
											)
										"
									/>
									<view class="like-text">
										{{ item.like_num }}
									</view>
								</view>
							</view>
						</view>

						<view
							class="right flex column align-center just-center"
						>
							<view class="time-bg">
								<view class="aa f-24">最早可约</view>
								<view class="bb f-24">
									时间{{ item.subscribe }}
								</view>
							</view>

							<view
								class="yy-btn f-20"
								@click.stop="onAppointment(item)"
							>
								预约TA
							</view>
						</view>
					</view>
				</block>
			</view>

			<uEmpty v-if="list.length === 0" />
		</view>

		<evaluatePop
			:isShow.sync="isShowEvaluate"
			:technicianID="evaluateTechnicianID"
		/>

		<wrapFooter :btnTitle="'返回上页'" @onClick="onBack"></wrapFooter>
	</div>
</template>

<script>
	import evaluatePop from "@/subPages/components/evaluate/evaluate.vue";
	import { technicianList } from "@/API/technician.js";
	import { getCity } from "@/API/common.js";
	import location from "@/utils/location.js";

	export default {
		components: {
			evaluatePop,
		},
		data() {
			return {
				serviceID: "", //服务ID
				navigationHeight: this.$navigationHeight,
				keywords: "",
				locationStatus: "loading",
				locationInfo: null,

				screenCity: "", //筛选的城市
				screenCityID: "", //筛选的城市ID
				screenCityList: [], //筛选的城市列表
				isShowEvaluate: false, //是否显示评价弹窗
				evaluateTechnicianID: 0, //评价的技师ID
				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad(options) {
			if (options.id) {
				this.serviceID = options.id;
			}
			this.$nextTick(() => {
				this.getCityData();
				this.getLocation();
			});
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 返回上一页
			 */
			onBack() {
				uni.navigateBack();
			},
			/**
			 * 重新定位
			 */
			onReLocation() {
				this.locationStatus = "loading";
				this.getLocation();
			},
			/**
			 * 获取当前城市
			 */
			getLocation() {
				location.getLocation((res) => {
					this.locationStatus = res.status;
					this.locationInfo = res;

					this.calculatScreenCity();
				});
			},
			/**
			 * 筛选城市
			 */
			onScreenCityChange(e) {
				let index = e.detail.value;

				this.screenCity = this.screenCityList[index].name;
				this.screenCityID = this.screenCityList[index].id;

				this.onRefresh();
			},
			/**
			 * 计算筛选的城市
			 */
			calculatScreenCity() {
				if (
					this.screenCityList.length > 0 &&
					this.locationInfo !== null
				) {
					let index = this.screenCityList.findIndex(
						(item) => item.name === this.locationInfo.city
					);
					if (index == -1) {
						index = 0;
					}
					this.screenCity = this.screenCityList[index].name;
					this.screenCityID = this.screenCityList[index].id;

					this.onRefresh();
				}
			},
			/**
			 * 生活照
			 */
			onPreviewImage(images) {
				uni.previewImage({
					current: 0,
					urls: images,
				});
			},
			/**
			 * 技师评价
			 */
			onShowEvaluate(item) {
				this.evaluateTechnicianID = item.id;
				this.isShowEvaluate = true;
			},
			/**
			 * 预约
			 */
			onAppointment(item) {
				if (item.is_service != 1) {
					return;
				}
				uni.navigateTo({
					url: `/subPages/technician/home/confirmOrder?serviceID=${this.serviceID}&technicianID=${item.id}`,
				});
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				technicianList({
					page: this.page,
					service_id: this.serviceID,
					area_id: this.screenCityID,
					keyword: this.keywords,
					lat: this.locationInfo.lat,
					lng: this.locationInfo.lng,
				}).then((res) => {
					this.total = res.data.total;
					const list = res.data.data;
					if (this.page === 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
			/**
			 * 获取城市信息
			 */
			getCityData() {
				getCity().then((res) => {
					this.screenCityList = res.data;

					this.calculatScreenCity();
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-head {
		position: sticky;
		left: 0;
		width: 100%;
		background-color: $bg-color;
		z-index: 90;

		.head-address {
			width: 100%;
			height: 88rpx;
			background-color: white;
			padding: 0 20rpx;
			box-sizing: border-box;

			.left-address {
				flex: 1;
				margin-right: 20rpx;
				overflow: hidden;

				> image {
					width: 24rpx;
					height: 28rpx;
				}
				> view {
					margin-left: 12rpx;
					flex: 1;
					overflow: hidden;
					color: $title-color;
				}
			}

			.right-again {
				> image {
					width: 24rpx;
					height: 24rpx;
				}
				> view {
					margin-left: 6rpx;
					color: $theme-color;
				}
			}
		}

		.head-search {
			margin-top: 20rpx;
			width: 100%;
			height: 116rpx;
			background-color: white;
			padding: 0 30rpx;
			box-sizing: border-box;

			.city-bg {
				max-width: 164rpx;
				margin-right: 10rpx;
				overflow: hidden;

				> view {
					--limit-num: 1;
					color: $title-color;
					overflow: hidden;
				}

				> image {
					margin-left: 12rpx;
					width: 20rpx;
					height: 12rpx;
				}
			}

			.search-bg {
				width: 516rpx;
				height: 60rpx;
				border-radius: 30rpx;
				overflow: hidden;
				background-color: #f5f6f8;

				> image {
					margin-left: 40rpx;
					width: 24rpx;
					height: 24rpx;
				}
				input {
					margin-left: 16rpx;
					flex: 1;
					margin-right: 20rpx;
					color: $title-color;
				}
				.place {
					color: #999999;
					line-height: 1;
				}
			}
		}
	}
	.wrap {
		--bottom-height: 140rpx;

		.wrap-list {
			width: 100%;
			overflow: hidden;
			padding: 0 20rpx;
			box-sizing: border-box;
			overflow: hidden;

			.item {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				background-color: white;
				border-radius: 20rpx;
				padding: 30rpx 30rpx 30rpx 20rpx;
				box-sizing: border-box;

				.left {
					overflow: hidden;

					.avatar {
						width: 126rpx;
						height: 126rpx;
						border-radius: 50%;
						overflow: hidden;
					}

					.service-status {
						margin-top: 8rpx;
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 18rpx;
						overflow: hidden;
						padding: 0 18rpx;
						background: $time-grad-color;
						color: $time-title-color;
					}
				}

				.center {
					margin-left: 22rpx;
					margin-right: 20rpx;
					flex: 1;
					overflow: hidden;

					.c-a {
						width: 100%;
						overflow: hidden;

						.nickname {
							--limit-num: 1;
							color: $title-color;
						}

						.life {
							margin-left: 10rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							border: 2rpx solid $theme-color;
							border-radius: 8rpx;
							overflow: hidden;
							padding: 0 16rpx;
							color: $theme-color;
						}
					}

					.c-b {
						margin-top: 18rpx;
						width: 100%;
						overflow: hidden;

						.star {
							width: 25rpx;
							height: 25rpx;
						}
						.score {
							margin-left: 5rpx;
							height: 25rpx;
							line-height: 25rpx;
							text-align: center;
							color: #f98e35;
						}
						.num {
							margin-left: 12rpx;
							height: 25rpx;
							line-height: 25rpx;
							text-align: center;
							color: #666666;
						}
					}

					.c-c {
						margin-top: 15rpx;
						width: 100%;
						overflow: hidden;

						> image {
							width: 24rpx;
							height: 28rpx;
						}
						> view {
							margin-left: 16rpx;
							color: #666666;
						}
					}

					.c-d {
						margin-top: 15rpx;
						width: 100%;
						overflow: hidden;
						color: #999999;

						.details-img {
							width: 30rpx;
							height: 30rpx;
						}
						.details-text {
							margin-left: 10rpx;
						}

						.evaluate-bg {
							margin-left: 20rpx;

							.evaluate-img {
								width: 31rpx;
								height: 30rpx;
							}
							.evaluate-text {
								margin-left: 10rpx;
							}
						}

						.like-bg {
							margin-left: 20rpx;

							.like-img {
								width: 31rpx;
								height: 31rpx;
							}
							.like-text {
								margin-left: 10rpx;
							}
						}
					}
				}

				.right {
					overflow: hidden;

					.time-bg {
						width: 130rpx;
						height: 80rpx;
						border-radius: 10rpx;
						overflow: hidden;
						border: 2rpx solid $theme-color;

						.aa {
							width: 130rpx;
							height: 44rpx;
							line-height: 44rpx;
							text-align: center;
							background: $grad-theme-color;
							color: $bg-text-color;
							overflow: hidden;
						}

						.bb {
							width: 130rpx;
							height: 36rpx;
							line-height: 36rpx;
							text-align: center;
							color: $theme-color;
							overflow: hidden;
						}
					}

					.yy-btn {
						margin-top: 34rpx;
						width: 130rpx;
						height: 50rpx;
						line-height: 50rpx;
						text-align: center;
						overflow: hidden;
						border-radius: 25rpx;
						background: $grad-theme-color;
						color: $bg-text-color;
					}
				}
			}
		}
	}
</style>
